<template>
  <div>
    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="form"
        :rules="rules"
        size="medium"
        label-width="135px"
        style="max-width: 1200px"
      >
        <el-col :span="13">
          <div class="tab-line colorBlue">
            <div>
              节能设置
              <el-switch
                style="margin-left: 20px"
                v-model="form.iSaveEnergyEnable"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
                v-isNormal
              >
              </el-switch>
            </div>
          </div>
        </el-col>
        <!-- :min="0"
              :max="100" -->
        <el-col :span="13">
          <el-form-item label="节能模式亮度" prop="iSaveEnergyBrightness">
            <el-input-number
              v-model="form.iSaveEnergyBrightness"
              controls-position="right"
              label="请输入节能模式亮度"
              :disabled="form.iSaveEnergyEnable == 0"
              v-isNormal
            ></el-input-number>
            <span style="margin-left: 10px">
              (0-100,0表示熄屏，100表示全亮）
            </span>
            <!-- <el-input
              v-model="form.iSaveEnergyBrightness"
              placeholder="请输入节能模式亮度"
              :style="{ width: '100%' }"
            >
              <template slot="append"><span>10-255</span></template>
            </el-input> -->
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="启动节能时间" prop="iSleepModeTime">
            <el-input-number
              v-model="form.iSleepModeTime"
              controls-position="right"
              label="请输入启动节能时间"
              :disabled="form.iSaveEnergyEnable == 0"
            ></el-input-number>
            <span style="margin-left: 10px"
            >(5-3600，单位s，设备未进入比对，或者无任何操作时同时达到计时时间后进入）</span
            >
          </el-form-item>
        </el-col>

        <!-- <el-col :span="13">
          <el-form-item label="" prop="">
            <el-checkbox
              v-model="form.iSaveEnergyEnable"
              :true-label="1"
              :false-label="0"
              >启用节能模式</el-checkbox
            >
            <el-checkbox
              v-model="form.iSleepModeEnable"
              :true-label="1"
              :false-label="0"
              >启用休眠时间</el-checkbox
            >
          </el-form-item>
        </el-col> -->

        <el-col :span="13">
          <div class="tab-line colorBlue">
            <div>
              休眠设置
              <el-switch
                style="margin-left: 20px"
                v-model="form.iSleepModeEnable"
                :active-value="activeValue"
                :inactive-value="inActiveValue"
              >
              </el-switch>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <el-form-item label="启动休眠时间" prop="iSaveEnergySleepTime">
            <el-input-number
              v-model="form.iSaveEnergySleepTime"
              controls-position="right"
              
              label="请输入启动休眠时间"
              :disabled="form.iSleepModeEnable == 0"
            ></el-input-number>
            <span style="margin-left: 10px"
            >(5-3600，单位s，设备未进入比对，或者无任何操作时同时达到计时时间后进入）</span
            >
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <div class="tab-line colorBlue">
            <div>工作状态</div>
          </div>
        </el-col>
        <el-col :span="13">
          <el-form-item label="工作状态亮度" prop="iNormalBrightness">
            <el-input-number
              v-model="form.iNormalBrightness"
              controls-position="right"
              label="请输入工作状态亮度"
            ></el-input-number>
            <span style="margin-left: 10px"
            >(0-100,0表示熄屏，100表示全亮）</span
            >
          </el-form-item>
        </el-col>

        <!-- <el-col :span="13" v-if="false">
          <div class="tab-line">
            <div>屏幕设置</div>
          </div>
        </el-col>
        <el-col :span="20" v-if="false">
          <el-form-item label="显示方向" prop="iSaveEnergyBrightness">
            <el-radio-group v-model="form.iSaveEnergyBrightness">
              <el-radio label="横向"></el-radio>
              <el-radio label="竖向"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="false">
          <el-form-item label="屏幕尺寸" prop="iSaveEnergyBrightness">
            <el-radio-group v-model="form.iSaveEnergyBrightness">
              <el-radio label="5寸"></el-radio>
              <el-radio label="7寸"></el-radio>
              <el-radio label="8寸"></el-radio>
              <el-radio label="10.1寸"></el-radio>
              <el-radio label="13.3寸"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="20" v-if="false">
          <el-form-item label="分辨率" prop="iSaveEnergyBrightness">
            <el-select
              v-model="form.iSaveEnergyBrightness"
              placeholder="请选择分辨率"
            >
              <el-option label="720*480" value="1"></el-option>
              <el-option label="1280*800" value="2"></el-option>
              <el-option label="1920*1080" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="13">
          <el-form-item label="常规显示亮度" prop="iNormalBrightness">
            <el-input
              v-model="form.iNormalBrightness"
              placeholder="请输入常规显示亮度"
              :style="{ width: '100%' }"
            >
              <template slot="append"><span>10-255</span></template>
            </el-input>
          </el-form-item>
        </el-col>
        <div>
          <el-col :span="13">
            <el-form-item label="进入休眠时间" prop="iSleepModeTime">
              <el-input
                type="number"
                v-model="form.iSleepModeTime"
                placeholder="请输入进入休眠时间"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="进入节能时间" prop="iSaveEnergySleepTime">
              <el-input
                type="number"
                v-model="form.iSaveEnergySleepTime"
                placeholder="请输入进入节能时间"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="开启屏幕距离" prop="iTurnOnScreenDistance">
              <el-input
                type="number"
                v-model="form.iTurnOnScreenDistance"
                placeholder="请输入开启屏幕距离"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </div> -->
        <el-col :span="24">
          <el-form-item size="large">
            <el-button
              type="primary"
              size="medium"
              style="width: 120px"
              @click="submitForm('elForm')"
              :loading="isLoading"
            >保存
            </el-button
            >
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import {
  getNetworPeripheralsFillApi,
  editNetworPeripheralsFillApi,
} from "@/api/network";

export default {
  props: {
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    const scopeRange = (rule, value, callback) => {
      if (value < 5 || value > 3600 || isNaN(Number(value))) {
        callback(new Error("请输入规定的范围值5~3600"));
      } else {
        callback();
      }
    };
    const brightnessRange = (rule, value, callback) => {
      if (value < 0 || value > 100 || isNaN(Number(value))) {
        callback(new Error("请输入规定的范围值0~100"));
      } else {
        callback();
      }
    };
    return {
      isLoading: false,
      activeValue: 1,
      inActiveValue: 0,
      form: {
        iSaveEnergyEnable: true, //节能设置开关
        iSaveEnergyEnable: 0,
        iSleepModeEnable: 0,
        iSleepModeTime: 0,
        iSaveEnergySleepTime: 0,
        iTurnOnScreenDistance: 0,
        iSaveEnergyBrightness: 10,
        iNormalBrightness: 10,
      },
      rules: {
        iSaveEnergyBrightness: [
          {required: true, trigger: "blur", message: "请输入正确范围"},
          {required: true, trigger: "blur", validator: brightnessRange},
          {type: "number", trigger: "blur", message: "显示时长必须为数字值"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
        ],
        iSleepModeTime: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入正确范围",
          },
          {required: true, trigger: "blur", validator: scopeRange},
          {type: "number", trigger: "blur", message: "时长必须为数字值"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
          // {required: true, validator: scopeRange, trigger: "blur"},
        ],
        iSaveEnergySleepTime: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入正确范围",
          },
          {required: true, trigger: "blur", validator: scopeRange},
          {type: "number", trigger: "blur", message: "时长必须为数字值"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
          // {required: true, validator: scopeRange, trigger: "blur"},
        ],
        iNormalBrightness: [
          {
            required: true,
            trigger: ["blur", "change"],
            message: "请输入正确范围",
          },
          {required: true, trigger: "blur", validator: brightnessRange},
          {type: "number", trigger: "blur", message: "显示时长必须为数字值"},
          { pattern:/^[0-9]*$/, trigger: "blur", message: '请输入正整数' },
          // {required: true, validator: scopeRange, trigger: "blur"},
        ],
      },
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    submitForm(formName) {
      console.log(78, this.form);
      if (this.form.iSaveEnergyBrightness > this.form.iNormalBrightness) {
        this.$message.error("节能模式亮度不能大于工作状态亮度");
        return false;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isLoading = true;
          editNetworPeripheralsFillApi(this.form).then((res) => {
            this.form = res;
            this.isLoading = false;
            this.$message.success("成功");
          });
        } else {
          return false;
        }
      });
    },
    getInfo() {
      getNetworPeripheralsFillApi().then((res) => {
        this.form = {...this.form, ...res};
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tab-line.colorBlue {
  background-color: #C6E2FF;
}
.tab-line {
  height: 40px;
  display: flex;
  justify-content: space-between;
  background-color: #f9f9f9;
  align-items: center;
  padding: 0 20px;
  margin-bottom: 10px;
}
</style>
